<template>
<div class="main7 flex-col">
  <banner @showVideo="showVideo"/>

  <div class="dialog flex-col justify-between" v-show="show">
    <div class="main16 flex-col"></div>
    <div class="main17 flex-row">
      <div class="block8 flex-col">
        <div class="box37 flex-col">
          <div class="group26 flex-col">
            <video id="video1" controls autoplay name="media" :src="src">
              <source :src="src" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
      <div class="block9 flex-col">
        <div class="group27 flex-row justify-between">
          <span class="info32">{{title}}</span>
          <div class="layer16 flex-col" @click="close"></div>
        </div>
      </div>
      <div class="block10 flex-col"></div>
    </div>
  </div>
</div>
</template>

<script>
import banner from './banner'

export default {
  components:{
    banner
  },
  data(){
    return {
      show: false,
      title: '标题内容',
      src: '',
    }
  },
  methods: {
    showVideo(item) {
      this.show = true
      this.title = item.name
      this.$nextTick(()=>{
        var myVideo=document.getElementById("video1");
        this.src = item.url
        myVideo.play();
      })
    },
    close() {
      this.show = false
      var myVideo=document.getElementById("video1");
      myVideo.pause();
    }
  }
}
</script>

<style lang="less">

.dialog {
  width: 888px;
  height: 529px;
  position: absolute;
  z-index: 999;
  left: -42px;
  top: 25px;
}

.main16 {
width: 888px;
height: 44px;
background: url(./dialog/SketchPng242eda6c3ba1191cd224eaf263c7eaf0b8c60052419f711492ff43fef96c35c4.png)
  0px 0px no-repeat;
}

.main17 {
width: 807px;
height: 506px;
justify-content: flex-center;
margin:0 auto;
}

.block8 {
z-index: 12;
position: relative;
width: 46px;
height: 46px;
background: url(./dialog/SketchPng77f13d521ccfb27a1b830c7a32cfe54aa0a4613cf62f248ee16d4e45c7a8f259.png) -2px -2px
  no-repeat;
margin: 257px 0 0 -3px;
}

.box37 {
z-index: 14;
height: 412px;
// background: url(./dialog/SketchPngd8e0da617962bfb4ddf8d535ddd64f4b2fc9adcfddbda928554fe5a8ad44f333.png) -2px -2px
//   no-repeat;
width: 734px;
position: absolute;
left: 36px;
top: -186px;
}

.group26 {
width: 734px;
height: 412px;
// background: url(./dialog/SketchPng0fd76af6a6c8c65c01f96b72a46234ea2e88ad0b875ac78fb5c2354eab896208.png)
//   100% no-repeat;
// border: 2px solid #fadda5;
// padding: 2px;
}
#video1{
  width: 100%;
  height: 100%;
}

.block9 {
height: 506px;
background: url(./dialog/SketchPng5ed58bb36360c0da5d3d68714cf65ac90798c911bf8c8e0a914dae60007deff1.png) -9px -9px
  no-repeat;
margin-left: -37px;
width: 794px;
}

.group27 {
width: 780px;
height: 33px;
margin: 25px 0 0 0;
}

.info32 {
width: 100%;
height: 33px;
overflow-wrap: break-word;
color: rgba(17, 108, 146, 1);
font-size: 24px;
letter-spacing: 2.5714285373687744px;
font-family: PingFangSC-Medium;
text-align: center;
white-space: nowrap;
line-height: 33px;
display: block;
margin: 0 auto;
}

.layer16 {
width: 29px;
height: 29px;
background: url(./dialog/SketchPng801dfb49331351ab032286596c1ef5c9e61ddcbb333570b7a17201c68571aa01.png)
  100% no-repeat;
margin-top: 2px;
cursor: pointer;
}

.block10 {
width: 46px;
height: 46px;
background: url(./dialog/SketchPng77f13d521ccfb27a1b830c7a32cfe54aa0a4613cf62f248ee16d4e45c7a8f259.png) -2px -2px
  no-repeat;
margin: 257px -3px 0 -36px;
}


/* banner */
.page {
  background-color: rgba(191, 221, 228, 1);
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  .main7 {
    width: 800px;
    height: 837px;
    margin-top: 10px;
    position: relative;
    .wrap9 {
      width: 800px;
      height: 782px;
      margin: 0;
      .bd20 {
        height: 782px;
        background: url(./center/SketchPng8e552f93df2328b0d5177cc155fd961e41a460f978a1ee906da1f465331fb981.png) -19px -19px
          no-repeat;
        width: 800px;
        .block2 {
          width: 624px;
          height: 406px;
          margin: 49px 0 0 96px;
          .section22 {
            width: 114px;
            height: 266px;
            margin-top: 92px;
            .main16 {
              height: 86px;
              background: url(./center/SketchPnga1e1be9e4688f7809930f8ae2dd58549f0fd76bdf5960789750e51692bd1e1d4.png) 4px 4px
                no-repeat;
              margin-left: 37px;
              width: 86px;
              &:hover{
                background: url(./center/bg-78.png)
                  no-repeat;
                transition: 0.3s
              }
              .word52 {
                width: 86px;
                height: 16px;
                overflow-wrap: break-word;
                color: rgba(17, 108, 146, 1);
                font-size: 11px;
                letter-spacing: 1.2000000476837158px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 16px;
                display: block;
                margin: 31px 0 0 0;
              }
            }
            .main17 {
              height: 116px;
              background: url(./center/SketchPng99761a209f5936add722a020c8a28498ee6570910f0f6f62a8bc240b2c095a23.png) 2.5px 2.5px
                no-repeat;
              margin-top: 79px;
              width: 116px;
              &:hover{
                background: url(./center/bg-116.png)
                  no-repeat;
                transition: 0.3s
              }
              .word53 {
                width: 116px;
                height: 22px;
                overflow-wrap: break-word;
                color: rgba(17, 108, 146, 1);
                font-size: 16px;
                letter-spacing: 1.7142856121063232px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 22px;
                display: block;
                margin: 44px 0 0 0;
              }
            }
          }
          .section23 {
            width: 309px;
            height: 406px;
            margin-left: 45px;
            .layer7 {
              width: 309px;
              height: 248px;
              .mod42 {
                width: 180px;
                height: 248px;
                .box20 {
                  height: 142px;
                  background: url(./center/SketchPng688b9de13e3f3a02cc2daa17c84346a4041013d637f1a9f0b60d6fecd3294bce.png) 1px 1px
                    no-repeat;
                  margin-left: 43px;
                  width: 142px;
                  &:hover{
                  background: url(./center/bg-142.png)
                    no-repeat;
                  transition: 0.3s
                  }
                  .word54 {
                    width: 142px;
                    height: 28px;
                    overflow-wrap: break-word;
                    color: rgba(17, 108, 146, 1);
                    font-size: 20px;
                    letter-spacing: 2.142857074737549px;
                    font-family: PingFangSC-Medium;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 28px;
                    display: block;
                    margin: 55px 0 0 0;
                  }
                }
                .box21 {
                  height: 86px;
                  background: url(./center/SketchPnga1e1be9e4688f7809930f8ae2dd58549f0fd76bdf5960789750e51692bd1e1d4.png) 4px 4px
                    no-repeat;
                  margin-top: 34px;
                  width: 86px;
                  &:hover{
                    background: url(./center/bg-78.png)
                      no-repeat;
                    transition: 0.3s
                  }
                  .txt31 {
                    width: 86px;
                    height: 16px;
                    overflow-wrap: break-word;
                    color: rgba(17, 108, 146, 1);
                    font-size: 11px;
                    letter-spacing: 1.2000000476837158px;
                    font-family: PingFangSC-Medium;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 16px;
                    display: block;
                    margin: 31px 0 0 0;
                  }
                }
              }
              .mod43 {
                height: 116px;
                background: url(./center/SketchPng99761a209f5936add722a020c8a28498ee6570910f0f6f62a8bc240b2c095a23.png) 2.5px 2.5px
                  no-repeat;
                margin-top: 121px;
                width: 116px;
                &:hover{
                  background: url(./center/bg-116.png)
                    no-repeat;
                  transition: 0.3s
                }
                .word55 {
                  width: 116px;
                  height: 22px;
                  overflow-wrap: break-word;
                  color: rgba(17, 108, 146, 1);
                  font-size: 16px;
                  letter-spacing: 1.7142856121063232px;
                  font-family: PingFangSC-Medium;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 22px;
                  display: block;
                  margin: 44px 0 0 0;
                }
              }
            }
            .layer8 {
              height: 172px;
              background: url(./center/SketchPng8e2ea03d98e554ad1fc080a8c3febee034471cd57f3e72951aba913b6646a146.png) 3px 3px
                no-repeat;
              width: 172px;
              margin: -7px 0 0 63px;
              &:hover{
                background: url(./center/bg-172.png)
                  no-repeat;
                margin: -7px 0 0 63px;
                transition: 0.3s
              }
              .paragraph2 {
                width: 172px;
                height: 66px;
                overflow-wrap: break-word;
                color: rgba(17, 108, 146, 1);
                font-size: 24px;
                letter-spacing: 2.5714285373687744px;
                font-family: PingFangSC-Medium;
                text-align: center;
                line-height: 33px;
                white-space: nowrap;
                display: block;
                margin: 50px 0 0 0;
              }
            }
          }
          .section24 {
            width: 151px;
            height: 262px;
            margin: 54px 0 0 5px;
            .main18 {
              height: 137px;
              background: url(./center/SketchPng688b9de13e3f3a02cc2daa17c84346a4041013d637f1a9f0b60d6fecd3294bce.png) -1px -1px
                no-repeat;
              margin-left: 14px;
              width: 137px;
              &:hover{
                background: url(./center/bg-142.png) -1px -1px
                  no-repeat;
                transition: 0.3s
              }
              .infoBox2 {
                width: 89px;
                height: 56px;
                overflow-wrap: break-word;
                color: rgba(17, 108, 146, 1);
                font-size: 20px;
                letter-spacing: 2.142857074737549px;
                font-family: PingFangSC-Medium;
                text-align: center;
                line-height: 28px;
                white-space: nowrap;
                display: block;
                margin: 41px 0 0 24px;
              }
            }
            .main19 {
              height: 86px;
              background: url(./center/SketchPnga1e1be9e4688f7809930f8ae2dd58549f0fd76bdf5960789750e51692bd1e1d4.png) 4px 4px
                no-repeat;
              margin-top: 48px;
              width: 86px;
              &:hover{
                background: url(./center/bg-78.png)
                  no-repeat;
                transition: 0.3s
              }
              .txt32 {
                width: 86px;
                height: 16px;
                overflow-wrap: break-word;
                color: rgba(17, 108, 146, 1);
                font-size: 11px;
                letter-spacing: 1.2000000476837158px;
                font-family: PingFangSC-Medium;
                text-align: center;
                white-space: nowrap;
                line-height: 16px;
                display: block;
                margin: 31px 0 0 0;
              }
            }
          }
        }
      }
      .word35 {
        width: 31px;
        height: 20px;
        overflow-wrap: break-word;
        color: rgba(160, 228, 233, 1);
        font-size: 14px;
        letter-spacing: 1.5px;
        text-align: left;
        white-space: nowrap;
        line-height: 20px;
        margin-top: 134px;
        display: block;
      }
    }
  }
}
</style>
